<template>
<div class="app-wrap">
	<div id="login">
		<div class="logo">
			<img v-lazy="'../../../static/images/logo.png'" />
		</div>
		<div class="input-box">
			<input
        class="search-text"
        placeholder-class="placeholder"
        placeholder="请输入手机号"
        v-model="photoNum"
        @keyup.13="submit"
        @confirm="submit"
      />
		</div>
		<div class="submit-butn" @click="submit" :style="{'background':photoNum == ''? '#B2B2B2' : '#DC786E'}">登录</div>
	</div>
	<mt-popup v-model="popupVisible" popup-transition="popup-fade" :modal="true" :closeOnClickModal="true" class="popup">
        <div class="tips">
			<div class="code">
				<img v-lazy="'../../../static/images/wxCode.png'" />
			</div>
			<div class="tips-text">
				<p>点击上方查看小程序码大图</p>
				<p>然后长按识别进入有氧FM小程序</p>
			</div>
		</div>
		<div class="close-butn" @click="closePopup">
			<img v-lazy="'../../../static/images/icon_close.png'" />
		</div>	
    </mt-popup>
</div>
</template>
<script>
import Vue from 'vue'
import Header from '@/components/layer/header';
import Footer from '@/components/layer/footer';
import validator from '@/utils/validator'
import controller from '@/components/controllers/controllers'
import {
    Toast
} from "mint-ui";


export default {
	components:{
		Header,
		Footer,
    },
	data() {
      return {
      	photoNum:'',
		popupVisible:false
      }
    },
    created () {

    	

    },
    methods: {
		//关闭弹窗
		closePopup(){
			this.popupVisible = false
		},
		//提交
    	submit(){
			if(this.photoNum != ""){
				if(validator.phone(this.photoNum)){
					controller.mobileLogin({mobile:this.photoNum}).then((res)=>{
						this.$sugoioregister()
						console.log("res",res)
						if(res.code == 0){
							localStorage.setItem("token",res.data.token)
							localStorage.setItem("userInfo",res.data.baseData)
							this.$router.push("/PersonalCenter")
							Toast("登录成功")
							this.$updateScore(2)
						}else if(res.code == 1001){
							this.popupVisible = true
						}
					})
				}else{
					Toast("请输入正确的手机号")
				}
			}
		}
    	
	},
    mounted() {
	   
	}
}
</script>
<style lang="scss" scoped>
	.popup{
		background: transparent;
		.tips{
			width:600px;
			height:850px;
			background:url("../../../static/images/img_bg.png") no-repeat;
			background-size:100% 100%;
			padding-top:216px;
			box-sizing:border-box;
			.code{
				width:500px;
				height:500px;
				background:#FFFFFF;
				border-radius:10px;
				margin:0 auto;
				margin-bottom:32px;
				display:flex;
				justify-content: center;
				align-items:center;
				box-shadow:0px 0px 2px 1px #cccccc;
				img{
					width:400px;
					height:400px;
				}
			}
			.tips-text{
				text-align:center;
				color:#E18076;
				font-size:24px;
				p{
					margin-bottom:5px
				}
			}
		}
		.close-butn{
			width:80px;
			height:80px;
			margin: 0 auto;
			margin-top:28px
		}
	}
	#login{
		width:100%;
		.logo{
			width:201px;
			height:201px;
			margin:0 auto;
			padding:183px 0 120px 0;
		}
		.input-box{
			width:630px;
			height:88px;
			line-height:88px;
			display:flex;
			justify-content: center;
			margin:0 auto;
			border:1px solid #D9DAD9;
			border-radius:44px;
			margin-bottom:80px;
			input{
				color:#323232;
				font-size:32px;
				border:none;
				width:200px;
				height:88px;
				line-height:88px
			}
			
			input::-webkit-input-placeholder { /* WebKit browsers */ 
				color: #CDCDCD;
				font-size:32px 
			} 
			input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
				color: #CDCDCD;
				font-size:32px 
			} 
			input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
				color: #CDCDCD;
				font-size:32px 
			} 
			input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
				color: #CDCDCD;
				font-size:32px 
			}
			
			.input:focus {
				border:none;
			}
		}
		.submit-butn{
			width:630px;
			height:88px;
			line-height:88px;
			text-align:center;
			margin:0 auto;
			color:#FFFFFF;
			font-size:32px;
			border-radius:44px;
		}
	}
</style>
